<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<section class="mb20">
    <div class="alert alert-warning alert-dismissable">
        <button aria-hidden="true" data-dismiss="alert" class="close" type="button" title="关闭">×</button>
        <i class="fa fa-quote-left c-danger"></i>
        <span class="fs12 c-danger ml5">
            1、基础专业：专属自己学业的基础专业（即第一次注册成功后可进行选择，基础专业最多可选3个）
            <br>
        </span>
        <span class="fs12 c-danger ml20">
             2、附加专业：当你购买了课程、试卷后。它们所属的专业，会解锁成功自动添加为你的附加专业
            <br>
        </span>
        <span class="fs12 c-danger ml20">
             3、科目：当你拥有了某专业，即可不受限的添加此专业下的所有科目
            <br>
        </span>
        <span class="fs12 c-danger ml20">
             4、提示：拥有专业越多，即可体验更多功能和更多的学习资源
        </span>

    </div>
</section>

<section>
    <!--基础专业 开始-->
    <div>
        <div class="orderTitle hLh30 mt10">
            <aide th:if="${#lists.isEmpty(userAcademicMap['subjectList'])} or ${#lists.size(userAcademicMap['subjectList'])} < 3" class="pull-right">
                <a href="javascript:void(0)" id="parentSubject" title="添加专业" class="btn btn-sm btn-info btn-rounded btn-outline">
                    <i class="fa fa-plus-circle"></i> 新增基础专业
                </a>
            </aide>
            <i class="fa fa-circle-o"></i>
            <b class="fs16 c-333 ml5">基础专业</b>
        </div>
        <div class="row pt10">
            <section th:if="!${#lists.isEmpty(userAcademicMap['subjectList'])}" th:each="subject : ${userAcademicMap['subjectList']}" th:attrappend="data-id=${subject['id']}" class="col-sm-6 parentId">
                <div class="well wm-well-box">
                    <h5>
                        <a href="javascript:void(0);" class="c-333 fa fa-clone" th:text="${' '+subject['subjectName']}"> </a>
                    </h5>
                    <hr>
                    <section th:if="!${#lists.isEmpty(subject['childSubjectList'])}" class="clearfix fs14">
                        <a th:each="child : ${subject['childSubjectList']}" th:text="${' '+child['subjectName']}" th:attrappend="data-child=${child['id']}" href="javascript:void(0);" class="ml20 c-666 mb20 pull-left fa fa-file-o child-subject">
                        </a>
                    </section>
                    <section class="text-center fs14">
                        <a href="javascript:void(0)" class="fs14 c-999 addChildSubject" th:attrappend="data-parent=${subject['id']}">
                            <i class="fa fa-plus-circle fs18"></i><br>
                            新增科目
                        </a>
                    </section>
                </div>
            </section>
            <section th:if="${#lists.isEmpty(userAcademicMap['subjectList'])}" class="no-data__wrap">
                <span class="no-data-ico"></span>
                <p class="mt20"><span class="c-666">抱歉，您还未设置基础专业/科目数据~~~</span></p>
            </section>
        </div>
    </div>
    <!--附加专业 开始-->
    <div>
        <div class="orderTitle hLh30 mt10">
            <i class="fa fa-circle-o c-warning"></i>
            <b class="fs16 c-333 ml5">附加专业</b>
        </div>
        <div class="row pt10">
            <th:block th:if="!${#lists.isEmpty(userAcademicMap['attachSubjectList'])}" th:each="subject : ${userAcademicMap['attachSubjectList']}">
                <section th:if="!${#lists.isEmpty(subject['childSubjectList'])}" class="col-sm-6">
                    <div class="well wm-well-box">
                        <h5>
                            <a href="javascript:void(0);" class="c-333 fa fa-clone" th:text="${' '+subject['subjectName']}"></a>
                        </h5>
                        <hr>
                        <section th:if="!${#lists.isEmpty(subject['childSubjectList'])}" class="clearfix fs14">
                            <a th:each="child : ${subject['childSubjectList']}" th:text="${' '+child['subjectName']}" href="javascript:void(0)" class="ml20 c-666 mb20 pull-left fa fa-file-o">
                            </a>
                        </section>
                    </div>
                </section>
            </th:block>
            <section class="col-sm-6">
                <div class="well wm-well-box">
                    <h5 class="pt10 mt20 text-center">
                        <a th:href="@{/web/course/courseList}" title="解锁附加专业" class="fs14 c-info">
                            <i class="fa fa-plus-circle fs36"></i>
                            <br>
                            快去购买课程，解锁附加专业吧！
                        </a>
                    </h5>
                </div>
            </section>
        </div>
    </div>
</section>

<div id="addParentSubject"  class="hide">
    <section class="ml20 mr20">
        <div class="mt20 mb20 pb10">
            <div class="tabs-container phase-tabs">
                <ul class="nav nav-tabs text-center">
                    <li class="active">
                        <a>添加专业</a>
                        <p class="c-ccc fs14 pb10">请选择你要关注的考试 (最多选择<span class="c-info"> 1 </span>项)</p>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active">
                        <div class="panel-body">
                            <div class="mr20 ml20">
                                <section>
                                    <div class="carousel slide carousel-class-member__wrap carousel-subject_wrap" id="carousel-professional">
                                        <div class="carousel-inner">
                                            <div class="item" style="display:block">
                                                <ol>
                                                    <li data-id="0" data-parent="0">
                                                        <a href="javascript:void (0);" class="regTxt">专业名</a>
                                                    </li>
                                                </ol>
                                            </div>
                                        </div>
                                    </div>
                                </section>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>



